<template>
  <div class="gantt-container">
    <div ref="tableContainer" class="gantt-table"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Gantt, VRender, tools } from "@visactor/vtable-gantt";

const tableContainer = ref(null);
/**
 *
 * id:零件唯一表示
 * title:零件名称
 * workOrderNo:工单编号
 * source:工单来源
 * workstation:工位
 * taskSource:任务来源
 * start:开始时间
 * end:结束时间
 * progress:进度
 * children:子任务
 */
const records = [
  {
    id: 1,
    title: "曲轴",
    workOrderNo: "WO-2024-001",
    source: "系统创建",
    workstation: "发动机车间",
    taskSource: "计划任务",
    start: "2024-03-01",
    end: "2024-03-10",
    progress: 0,
    hierarchyState: "expand", //默认展开
    children: [
      {
        id: 11,
        title: "原料准备",
        workOrderNo: "WO-2024-001-1",
        source: "系统创建",
        workstation: "原料仓库",
        taskSource: "计划任务",
        start: "2024-03-01",
        end: "2024-03-02",
        progress: 100,
      },
      {
        id: 12,
        title: "锻造成形",
        workOrderNo: "WO-2024-001-2",
        source: "系统创建",
        workstation: "锻造车间",
        taskSource: "计划任务",
        start: "2024-03-02",
        end: "2024-03-04",
        progress: 80,
      },
      {
        id: 13,
        title: "热处理",
        workOrderNo: "WO-2024-001-3",
        source: "系统创建",
        workstation: "热处理车间",
        taskSource: "计划任务",
        start: "2024-03-04",
        end: "2024-03-05",
        progress: 60,
      },
      {
        id: 14,
        title: "车削加工",
        workOrderNo: "WO-2024-001-4",
        source: "系统创建",
        workstation: "CNC加工中心",
        taskSource: "计划任务",
        start: "2024-03-05",
        end: "2024-03-07",
        progress: 30,
      },
      {
        id: 15,
        title: "磨削加工",
        workOrderNo: "WO-2024-001-5",
        source: "系统创建",
        workstation: "磨削车间",
        taskSource: "计划任务",
        start: "2024-03-07",
        end: "2024-03-08",
        progress: 10,
      },
      {
        id: 16,
        title: "清洗去毛刺",
        workOrderNo: "WO-2024-001-6",
        source: "系统创建",
        workstation: "清洗工作站",
        taskSource: "计划任务",
        start: "2024-03-08",
        end: "2024-03-09",
        progress: 0,
      },
      {
        id: 17,
        title: "平衡检测",
        workOrderNo: "WO-2024-001-7",
        source: "系统创建",
        workstation: "检测中心",
        taskSource: "计划任务",
        start: "2024-03-09",
        end: "2024-03-09",
        progress: 0,
      },
      {
        id: 18,
        title: "表面处理",
        workOrderNo: "WO-2024-001-8",
        source: "系统创建",
        workstation: "表面处理车间",
        taskSource: "计划任务",
        start: "2024-03-09",
        end: "2024-03-10",
        progress: 0,
      },
      {
        id: 19,
        title: "质检工序",
        workOrderNo: "WO-2024-001-9",
        source: "系统创建",
        workstation: "质检中心",
        taskSource: "计划任务",
        start: "2024-03-10",
        end: "2024-03-10",
        progress: 0,
      },
      {
        id: 20,
        title: "包装入库",
        workOrderNo: "WO-2024-001-10",
        source: "系统创建",
        workstation: "仓库",
        taskSource: "计划任务",
        start: "2024-03-10",
        end: "2024-03-10",
        progress: 0,
      },
    ],
  },
  {
    id: 2,
    title: "变速箱壳体",
    workOrderNo: "WO-2024-002",
    source: "系统创建",
    workstation: "变速箱生产线",
    taskSource: "计划任务",
    start: "2024-03-01",
    end: "2024-03-12",
    progress: 0,
    hierarchyState: "expand",
    children: [
      {
        id: 21,
        title: "原料准备",
        workOrderNo: "WO-2024-002-1",
        source: "系统创建",
        workstation: "原料仓库",
        taskSource: "计划任务",
        start: "2024-03-01",
        end: "2024-03-02",
        progress: 100,
      },
      {
        id: 22,
        title: "铸造成形",
        workOrderNo: "WO-2024-002-2",
        source: "系统创建",
        workstation: "铸造车间",
        taskSource: "计划任务",
        start: "2024-03-02",
        end: "2024-03-05",
        progress: 80,
      },
      {
        id: 23,
        title: "CNC加工",
        workOrderNo: "WO-2024-002-3",
        source: "系统创建",
        workstation: "CNC加工中心",
        taskSource: "计划任务",
        start: "2024-03-05",
        end: "2024-03-07",
        progress: 50,
      },
      {
        id: 24,
        title: "清洗去毛刺",
        workOrderNo: "WO-2024-002-4",
        source: "系统创建",
        workstation: "清洗工作站",
        taskSource: "计划任务",
        start: "2024-03-07",
        end: "2024-03-08",
        progress: 20,
      },
      {
        id: 25,
        title: "表面处理",
        workOrderNo: "WO-2024-002-5",
        source: "系统创建",
        workstation: "表面处理车间",
        taskSource: "计划任务",
        start: "2024-03-08",
        end: "2024-03-09",
        progress: 10,
      },
      {
        id: 26,
        title: "质检工序",
        workOrderNo: "WO-2024-002-6",
        source: "系统创建",
        workstation: "质检中心",
        taskSource: "计划任务",
        start: "2024-03-09",
        end: "2024-03-10",
        progress: 0,
      },
      {
        id: 27,
        title: "组装测试",
        workOrderNo: "WO-2024-002-7",
        source: "系统创建",
        workstation: "测试车间",
        taskSource: "计划任务",
        start: "2024-03-10",
        end: "2024-03-11",
        progress: 0,
      },
      {
        id: 28,
        title: "包装入库",
        workOrderNo: "WO-2024-002-8",
        source: "系统创建",
        workstation: "仓库",
        taskSource: "计划任务",
        start: "2024-03-11",
        end: "2024-03-12",
        progress: 0,
      },
    ],
  },
];

// 左侧任务容器
const columns = [
  {
    field: "title", //指定表头字段
    title: "工单名称", //表头名称
    width: 120, //设置固定宽度
    sort: true, //是否支持排序，也可以定义函数来指定排序规则
    tree: true, //该列是否为树形解构
    editor: "input", //配置该列单元格编辑器
    ellipsis: true, // 文本溢出显示省略号
    tooltip: true, // 鼠标悬浮显示全文
    style: {
      fontSize: 14,
      color: "#1f2f3d",
      fontWeight: "bold",
    },
  },
  {
    field: "workOrderNo", // 工单编号字段
    title: "工单编号",
    width: 100,
    sort: true,
    editor: "input", // 修改为普通输入框
    ellipsis: true, // 文本溢出显示省略号
    tooltip: true, // 鼠标悬浮显示全文
    style: {
      fontSize: 13,
      color: "#303133",
    },
  },
  {
    field: "source", // 工单来源字段
    title: "工单来源",
    width: 90,
    sort: true,
    editor: "select", // 修改为下拉选择框
    options: ["系统创建", "手动创建", "导入创建"], // 添加选项
    ellipsis: true, // 文本溢出显示省略号
    tooltip: true, // 鼠标悬浮显示全文
    style: {
      fontSize: 13,
      color: "#303133",
    },
  },
  {
    field: "workstation", // 工作站字段
    title: "工作站",
    width: 90,
    sort: true,
    editor: "select", // 修改为下拉选择框
    ellipsis: true, // 文本溢出显示省略号
    tooltip: true, // 鼠标悬浮显示全文
    style: {
      fontSize: 13,
      color: "#303133",
    },
  },
  {
    field: "taskSource", // 任务来源字段
    title: "任务来源",
    width: 90,
    sort: true,
    editor: "select", // 修改为下拉选择框
    options: ["计划任务", "临时任务", "紧急任务"],
    ellipsis: true, // 文本溢出显示省略号
    tooltip: true, // 鼠标悬浮显示全文
    style: {
      fontSize: 13,
      color: "#303133",
    },
  },
  {
    field: "start", // 开始时间字段
    title: "开始时间",
    width: 100,
    sort: true,
    editor: "date-input", // 日期输入框
    format: "YYYY-MM-DD HH:mm:ss", // 添加日期格式
    ellipsis: true, // 文本溢出显示省略号
    tooltip: true, // 鼠标悬浮显示全文
    style: {
      fontSize: 13,
      color: "#303133",
    },
  },
  {
    field: "end", // 结束时间字段
    title: "结束时间",
    width: 100,
    sort: true,
    editor: "date-input", // 日期输入框
    format: "YYYY-MM-DD HH:mm:ss", // 添加日期格式
    ellipsis: true, // 文本溢出显示省略号
    tooltip: true, // 鼠标悬浮显示全文
    style: {
      fontSize: 13,
      color: "#303133",
    },
  },
];

const option = {
  overscrollBehavior: "none",
  records,
  // 左侧任务信息表
  taskListTable: {
    enableTreeNodeMerge: true,
    columns,
    tableWidth: "auto",
    theme: {
      frameStyle: {
        borderLineWidth: 0,
        shadowBlur: 0,
      },
      // 表头样式
      headerStyle: {
        borderColor: "#e1e4e8",
        borderLineWidth: 1,
        fontSize: 12,
        fontWeight: "bold",
        color: "red",
        bgColor: "#EEF1F5",
      },
    },
    tooltip: {
      isShowOverflowTextTooltip: true,
    },
    menu: {},
  },
  // 边框
  frame: {},
  // 网格线
  grid: {
    outerFrameStyle: {
      borderLineWidth: 1,
      borderColor: "#e1e4e8",
      cornerRadius: 0,
    },
    verticalSplitLine: {
      lineColor: "#e1e4e8",
      lineWidth: 1,
    },
    horizontalSplitLine: {
      lineColor: "#e1e4e8",
      lineWidth: 1,
    },
    verticalSplitLineMoveable: true,
    verticalSplitLineHighlight: {
      lineColor: "green",
      lineWidth: 1,
    },
  },
  headerRowHeight: 40,
  rowHeight: 40,
  // 任务条
  taskBar: {
    startDateField: "start",
    endDateField: "end",
    progressField: "progress",
    // 任务条样式
    barStyle: {
      width: 20,
      /** 任务条的颜色 */
      barColor: "yellow",
      /** 已完成部分任务条的颜色 */
      completedBarColor: "red",
      /** 任务条的圆角 */
      cornerRadius: 8,
      /** 任务条的边框 */
      borderLineWidth: 1,
      /** 边框颜色 */
      borderColor: "black",
    },
  },
  // 日期表头
  timelineHeader: {
    colWidth: 100,
    backgroundColor: "#EEF1F5",
    horizontalLine: { lineWidth: 1, lineColor: "#e1e4e8" },
    verticalLine: { lineWidth: 1, lineColor: "red" },
    scales: [
      {
        unit: "day",
        step: 1,
        format(date) {
          console;
          const day = tools.formatDate(new Date(date.startDate), "yyyy-mm-dd");
          return day;
        },
        style: {
          fontSize: 12,
          fontWeight: "normal",
        },
      },
    ],
  },
  // 标记线
  markLine: [],
  scrollStyle: {
    scrollRailColor: "RGBA(246,246,246,0.5)",
    visible: "scrolling",
    width: 6,
    scrollSliderCornerRadius: 2,
    scrollSliderColor: "#c0c0c0",
  },
};

onMounted(() => {
  new Gantt(tableContainer.value, option);
});
</script>

<style lang="scss" scoped>
.gantt-container {
  padding: 20px;

  .gantt-table {
    width: 600px;
    height: 400px;
    position: absolute;
  }
}
</style>
